<template>
    <div style="background: #fff;min-height: 100vh;">

        <div style="z-index: 10;height: 100vh;overflow: scroll;">
            <div style="display: flex;justify-content: space-between;padding:0 20px;">
                <img @click="returnBcak" style="width: 10px;margin-left: -1px;margin-top: 6px;" src="../assets/img/common-icon-ArrowLeftBlack.svg" alt="">
                <div style="position: relative;left: -25px;">
                    <img style="position: absolute;top:21px;left:10px;" src="../assets/img/common-icon-search.svg" alt="">
                    <input v-focus @focus="utils.blursCli" class="inputTaoSty" v-model='searchVal' type="text" placeholder="复制标题搜淘宝天猫大额优惠券">
                </div>
                <div style="font-size: 14px;color:#888;line-height: 63px;" @click="searchCli">搜索</div>
            </div>
            <van-tabs v-model="active" title-active-color="#FF2E67" style="font-weight: bold;padding:0 20px;">
                <van-tab title="淘宝">
                    <div v-if="!listShow">
                        <div style="margin-top: 25px;">
                            <span style="font-size: 14px;color:#888;">历史搜索</span>
                            <img @click="deleteHistory" style="float: right;width:16px;" src="../assets/img/common-icon-delete.svg" alt="">
                        </div>
                        <ul style="margin-top: 10px;">
                            <li class="boxSty" v-for="val in historyList" @click="historyCli(val.searchName)">{{val.searchName}}</li>
                        </ul>
                        <!-- <div style="margin-top: 20px;">
                            <span style="font-size: 14px;color:#888;">热门搜索</span>
                        </div>
                        <ul style="margin-top: 20px;">
                            <li class="boxSty" style="color: #FF2E67;background:rgba(255, 46, 103, 0.2);">睡衣</li>
                        </ul> -->
                    </div>                
                    <div v-else style="position: absolute;left: 0px;width: 100%;">
                        <div style="display: flex;justify-content: space-between;height:50px;line-height: 50px;font-size: 13px;padding:0 10px;padding-right: 30px;">
                            <!-- <div style="display: inline-block;width:20%;" :class="allAct?'divColorSty':''">
                                <van-dropdown-menu class="deepSty" active-color="#FF2E67">
                                    <van-dropdown-item v-model="value1" :options="option1" />   
                                </van-dropdown-menu>
                            </div> -->
                            <div @click="sortCli(0)">
                                <span :class="allAct?'colorSty':''">综合</span>
                                <!-- <div>
                                    <span @click="selectProduct(2,'bottom')" :class="numActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(2,'top')" :class="numActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div> -->
                            </div>
                            <div @click="sortCli(1)">
                                <span :class="numActTop || numActBottom?'colorSty':''">销量</span>
                                <!-- <div>
                                    <span @click="selectProduct(2,'bottom')" :class="numActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(2,'top')" :class="numActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div> -->
                            </div>
                            <div @click="sortCli(2)">
                                <span :class="quanActTop || quanActBottom?'colorSty':''">佣金比例</span>
                                <!-- <div>
                                    <span @click="selectProduct(4,'bottom')"  :class="quanActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(4,'top')" :class="quanActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div> -->
                            </div>
                            <div>
                                <span :class="priceActBottom || priceActTop?'colorSty':''">价格</span>
                                <div>
                                    <span @click="selectProduct(3,'bottom')" :class="priceActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(3,'top')" :class="priceActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div>
                            </div>
                        </div>
                        <!-- <div>
                            <button class="btn1" v-if="showQuan" @click="showQuan=!showQuan">显示有优惠券商品</button>
                            <button class="btn1" style="opacity: .5;" v-else @click="showQuan=!showQuan">已显示有优惠券商品</button>
                        </div> -->
                        <div style="background: #EDEDED;padding:10px;">
                            <productList @resultVal="resultVal" @numId="getNumId" @proId="getProId" :urlPathVal="indexUrl" :dataList="objVla"></productList>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="拼多多">
                    <div v-if="!listShow">
                        <div style="margin-top: 25px;">
                            <span style="font-size: 14px;color:#888;">历史搜索</span>
                            <img style="float: right;width:16px;" src="../assets/img/common-icon-delete.svg" alt="">
                        </div>
                        <ul style="margin-top: 10px;">
                            <li class="boxSty" v-for="val in historyList" @click="historyCli(val.searchName)">{{val.searchName}}</li>
                        </ul>
                        <!-- <div style="margin-top: 20px;">
                            <span style="font-size: 14px;color:#888;">热门搜索</span>
                        </div>
                        <ul style="margin-top: 20px;">
                            <li class="boxSty" style="color: #FF2E67;background:rgba(255, 46, 103, 0.2);">睡衣</li>
                        </ul> -->
                    </div>                
                    <div v-else style="position: absolute;left: 0px;width: 100%;">
                        <div style="display: flex;justify-content: space-between;height:50px;line-height: 50px;font-size: 13px;padding:0 10px;padding-right: 30px;">
                            <!-- <div style="display: inline-block;width:20%;" :class="allAct?'divColorSty':''">
                                <van-dropdown-menu class="deepSty" active-color="#FF2E67">
                                    <van-dropdown-item v-model="value1" :options="option1" />   
                                </van-dropdown-menu>
                            </div> -->
                            <div @click="sortCli(0)">
                                <span :class="allAct?'colorSty':''">综合</span>
                                <!-- <div>
                                    <span @click="selectProduct(2,'bottom')" :class="numActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(2,'top')" :class="numActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div> -->
                            </div>
                            <div @click="sortCli(1)">
                                <span :class="numActTop || numActBottom?'colorSty':''">销量</span>
                                <!-- <div>
                                    <span @click="selectProduct(2,'bottom')" :class="numActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(2,'top')" :class="numActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div> -->
                            </div>
                            <div @click="sortCli(2)">
                                <span :class="quanActTop || quanActBottom?'colorSty':''">佣金比例</span>
                                <!-- <div>
                                    <span @click="selectProduct(4,'bottom')"  :class="quanActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(4,'top')" :class="quanActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div> -->
                            </div>
                            <div>
                                <span :class="priceActBottom || priceActTop?'colorSty':''">价格</span>
                                <div>
                                    <span @click="selectProduct(3,'bottom')" :class="priceActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(3,'top')" :class="priceActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div>
                            </div>
                        </div>
                        <!-- <div>
                            <button class="btn1" v-if="showQuan" @click="showQuan=!showQuan">显示有优惠券商品</button>
                            <button class="btn1" style="opacity: .5;" v-else @click="showQuan=!showQuan">已显示有优惠券商品</button>
                        </div> -->
                        <div style="background: #EDEDED;padding:10px;">
                            <productList @proId="getProId" @numId="getNumId" :urlPathVal="indexUrl" :dataList="objVla"></productList>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="京东">
                    <div v-if="!listShow">
                        <div style="margin-top: 25px;">
                            <span style="font-size: 14px;color:#888;">历史搜索</span>
                            <img style="float: right;width:16px;" src="../assets/img/common-icon-delete.svg" alt="">
                        </div>
                        <ul style="margin-top: 10px;">
                            <li class="boxSty" v-for="val in historyList" @click="historyCli(val.searchName)">{{val.searchName}}</li>
                        </ul>
                        <!-- <div style="margin-top: 20px;">
                            <span style="font-size: 14px;color:#888;">热门搜索</span>
                        </div>
                        <ul style="margin-top: 20px;">
                            <li class="boxSty" style="color: #FF2E67;background:rgba(255, 46, 103, 0.2);">睡衣</li>
                        </ul> -->
                    </div>                
                    <div v-else style="position: absolute;left: 0px;width: 100%;">
                        <div style="display: flex;justify-content: space-between;height:50px;line-height: 50px;font-size: 13px;padding:0 10px;padding-right: 30px;">
                            <div>
                                <span :class="allAct?'colorSty':''">综合</span>
                                <!-- <div>
                                    <span @click="selectProduct(2,'bottom')" :class="numActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(2,'top')" :class="numActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div> -->
                            </div>
                            <div>
                                <span :class="numActTop || numActBottom?'colorSty':''">销量</span>
                                <!-- <div>
                                    <span @click="selectProduct(2,'bottom')" :class="numActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(2,'top')" :class="numActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div> -->
                            </div>
                            <div>
                                <span :class="quanActTop || quanActBottom?'colorSty':''">佣金比例</span>
                                <!-- <div>
                                    <span @click="selectProduct(4,'bottom')"  :class="quanActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(4,'top')" :class="quanActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div> -->
                            </div>
                            <div>
                                <span :class="priceActBottom || priceActTop?'colorSty':''">价格</span>
                                <div>
                                    <span @click="selectProduct(3,'bottom')" :class="priceActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                                    <span @click="selectProduct(3,'top')" :class="priceActTop?'iconStyTop activeTop':'iconStyTop'"></span>
                                </div>
                            </div>
                        </div>
                        <!-- <div>
                            <button class="btn1" v-if="showQuan" @click="showQuan=!showQuan">显示有优惠券商品</button>
                            <button class="btn1" style="opacity: .5;" v-else @click="showQuan=!showQuan">已显示有优惠券商品</button>
                        </div> -->
                        <div style="background: #EDEDED;padding:10px;">
                            <productList @resultVal="resultVal" @numId="getNumId" @proId="getProId" :urlPathVal="indexUrl" :dataList="objVla"></productList>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>

        <div v-if="showDetail" style="position: absolute;top:0;z-index: 100;width: 100%;">
            <detailsPage @getShow="getShow" :tranmitId="proId" :typeShop="typeShop"></detailsPage>
        </div>
        <div v-if="creatShareShow" style="position: absolute;top:0;z-index: 100;width: 100%;">
            <creatShare :numId="numId" @returnPage="returnCurrentPage"></creatShare>
        </div>
    </div>
  </template>
  
  <script>
    import detailsPage from './public/detailsPage.vue';
    import { Tab, Tabs,DropdownMenu, DropdownItem,Toast } from 'vant';
    import productList from './public/productList.vue';
    import creatShare from './creatShare.vue';
  export default {
    name: 'searchPage',
    data () {
      return {
        historyList:[],
        searchVal:"",
        indexUrl:"searchtao",
        typeShop:'taobao',
        proId:"",
        objVla:{
            search:"",
            sort:""
        },
        showDetail:false,
        active:0,
        listShow:false,
        value1: 0,
        option1: [
            { text: '综合', value: 0 },
            { text: '佣金比例由高到低', value: 1 },
            { text: '佣金比例由低到高', value: 2 },
        ],
        numActTop:false,
        numActBottom:false,
        priceActTop:false,
        priceActBottom:false,
        quanActTop:false,
        quanActBottom:false,
        allAct:true,
        showQuan:true,
        userId:"",
        numId:'',
        creatShareShow:false,
      }
    },
    components: {  
        productList,
        [Tab.name]:Tab,
        [Tabs.name]:Tabs,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        detailsPage,
        creatShare
    },
    watch: {
        value1(val){
            this.numActTop = false;
            this.numActBottom = false;
            this.priceActTop = false;
            this.priceActBottom = false;
            this.quanActTop = false;
            this.quanActBottom = false;
            this.allAct = true;
        },
        searchVal(val){
            var str = this.objVla.sort;
            this.objVla={search:val,sort:str};
        },
        active(val){
            var that = this;
            // that.listShow = true;  
            if(val == 0){
                that.typeShop = "taobao";
                that.indexUrl = "searchtao";
            }
            if(val == 1){
                that.typeShop = "pinduoduo";
                that.indexUrl = "searchpinduoduo";
            }
            if(val == 2){
                that.typeShop = "jingdong";
                that.indexUrl = "searchjingdong";
            }
        },
    },
    mounted() {
        this.userId= localStorage.getItem('user_id');
        this.getHistory();
    },
    methods: {
        returnCurrentPage(data){
            this.creatShareShow = data;
        },
        getNumId(data){
            this.numId = data;
            this.creatShareShow = true;
        },
        getHistory(){
            this.$http.post(this.utils.config + "/netmall/app/person/api/getHistorySearchList?user_id="+this.userId).then((data) => {
                this.historyList = data.data.result;
            })
        },
        searchCli(){
            var that = this;
            that.listShow = true;       
            // this.$http.get(this.utils.config+"/netmall/app/person/api/integralTask?user_id="+this.userId+"&taskName=搜索商品").then((data) => {
            // })     
            that.$http.post(that.utils.config + "/netmall/app/person/api/addHistorySearch?serarchName="+that.searchVal+"&user_id="+that.userId).then((data) => {
                that.getHistory();
                })   
        },
        historyCli(val){
            this.searchVal = val;
        },
        deleteHistory(){
            this.historyList=[];
            this.$http.post(this.utils.config + "/netmall/app/person/api/deleteHistorySearchList?user_id="+this.userId).then((data) => {
            })   
        },
        resultVal(data){
            this.listShow = false;
        },
        sortCli(num){
            var that = this;
            that.numActTop = false;
            that.numActBottom = false;
            that.priceActTop = false;
            that.priceActBottom = false;
            that.quanActTop = false;
            that.quanActBottom = false;
            that.allAct = false;
            if(num == 0){
                that.allAct = true;
                var str = this.objVla.sort;
                this.objVla={search:that.searchVal,sort:""};
            }
            if(num == 1){
                that.numActTop = true;
                var str = this.objVla.sort;
                this.objVla={search:that.searchVal,sort:"total_sales_des"};
            }
            if(num == 2){
                that.quanActTop = true;
                var str = this.objVla.sort;
                this.objVla={search:that.searchVal,sort:"tk_rate_des"};
            }
        },
        getProId(data){
            this.proId = data;
            this.showDetail = true;
        },
        getShow(data){
            this.showDetail = data;
        },
        returnBcak(){
            this.$router.go(-1);
        },
        selectProduct(num,str){
            this.numActTop = false;
            this.numActBottom = false;
            this.priceActTop = false;
            this.priceActBottom = false;
            this.quanActTop = false;
            this.quanActBottom = false;
            this.allAct = false;
            // if(num==2){
            //    if(str == 'top') this.numActTop = true;
            //    if(str == 'bottom') this.numActBottom = true;
            // }
            if(num==3){
               if(str == 'top') {
                   this.priceActTop = true;
                    var str = this.objVla.sort;
                    this.objVla={search:this.searchVal,sort:"price_dec"};
                }
               if(str == 'bottom') {
                   this.priceActBottom = true;
                   var str = this.objVla.sort;
                    this.objVla={search:this.searchVal,sort:"price_asc"};
                }
            }
            // if(num==4){
            //    if(str == 'top') this.quanActTop = true;
            //    if(str == 'bottom') this.quanActBottom = true;
            // }
        }
    },
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      .btn1{
        margin-left:10%;
        margin-bottom: 15px;
        width:80%;
        height:35px;
        line-height: 35px;
        color:#fff;
        background: #FF2E67;
        border-radius: 18px;
        border: none;
      }
      .inputTaoSty{
            padding:0 10px;
            padding-left:36px ;
            background: #eee;
            width:100%;
            height:46px;
            border-radius: 9px;
            border:none;
            margin-top:10px;
        }
        .boxSty{
            display: inline-block;
            background: #eee;
            padding:5px 12px;
            font-size: 14px;
            margin-right: 8px;
            border-radius: 3px;
            margin-top:10px;
        }
        .deepSty /deep/ .van-ellipsis{
            font-size: 13px!important;
        }
        .deepSty /deep/ .van-dropdown-menu__title::after{
            border-color: transparent transparent #D8D8D8 #D8D8D8;
        }
        .deepSty /deep/ .van-dropdown-menu__item{
            background-color: rgba(255,255,255,0)!important;
        }
        .divColorSty /deep/ .van-ellipsis{
            color: #FF2E67!important;
        }
        .divColorSty /deep/ .van-dropdown-menu__title::after{
            border-color: transparent transparent #FF2E67 #FF2E67;
        }
        .iconStyTop{
            position: relative;
            top: -38px;
            left: 25px;
            width: 0;
            height: 0;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            border-top: 4px solid #D8D8D8;
        }
        .iconStyBottom{
            position: relative;
            top: -63px;
            left: 33px;
            width: 0;
            height: 0;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            border-bottom: 4px solid #D8D8D8;
        }
        .activeTop{
            border-top: 4px solid #FF2E67!important;
        }
        .activeBottom{
            border-Bottom: 4px solid #FF2E67!important;
        }
        .colorSty{
            color: #FF2E67!important;
        }
  </style>
  